import { Card, Col, Image, Row, Typography } from "antd";
import dayjs from "dayjs";
import { Icon } from "components/lib";
import styled from "@emotion/styled";
import { contentObj } from "screens/edit/edit.slice";
import { Link } from "react-router-dom";

export const ListContent = ({
  data: item,
  ...resProps
}: {
  data: contentObj;
}) => {
  const showDemo = () => {
    window.open(item.demoUrl);
  };

  return (
    <Container>
      <RowBox>
        <FlexCol span={4} offset={1}>
          <ImageBox>
            {item.isnote === 1 ? (
              <Link to={`${item.id}`}>
                <Image src={item.imgUrl} preview={false} title={item.title} />
              </Link>
            ) : (
              <Image
                src={item.imgUrl}
                preview={false}
                title={item.title}
                onClick={() => showDemo()}
                style={{ cursor: "pointer" }}
              />
            )}
          </ImageBox>
        </FlexCol>
        <TextBox span={18}>
          {item.isnote === 1 ? (
            <LinkBox to={`${item.id}`}>
              <TTitle>{item.title}</TTitle>
            </LinkBox>
          ) : (
            <LinkBox onClick={() => showDemo()} to="">
              <TTitle>{item.title}</TTitle>
            </LinkBox>
          )}

          <TParagraph ellipsis={{ rows: 3, tooltip: true }}>
            {item.tip}
          </TParagraph>
          <TText>
            <Icon name={"icon-geren"} marginRight={"0"} fontSize={"1rem"} />
            {item.author}
            <Icon name={"icon-shizhong"} marginRight={"0"} fontSize={"1rem"} />
            {dayjs(item.createTime).format("YYYY-MM-DD")}
          </TText>
        </TextBox>
      </RowBox>
    </Container>
  );
};

const LinkBox = styled(Link)`
  display: block;
  width: 100%;
  @media screen and (max-width: 640px) {
    text-align: center;
  }
`;

const RowBox = styled(Row)`
  display: flex;
  justify-content: center;
  align-items: center;
`;

const FlexCol = styled(Col)`
  min-width: 10rem;
`;

const TextBox = styled(Col)`
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  position: relative;
  padding: 1rem;
`;

const ImageBox = styled.div`
  height: 10rem;
  width: 10rem;
  overflow: hidden;
  margin: 0;
`;

const TParagraph = styled(Typography.Paragraph)`
  font-size: 1.2rem;
  line-height: 2rem;
  margin: 1rem 0;
`;
const TText = styled(Typography.Text)`
  font-size: 1.2rem;
  line-height: 1rem;
  position: absolute;
  right: 0;
  bottom: -1rem;
`;
const TTitle = styled(Typography.Text)`
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
`;
const Container = styled(Card)`
  margin-bottom: 2rem;
  min-width: 36rem;
  width: 100%;
  max-width: 86rem;
`;
